<template>
	<view class="body">
		<view
			style="display:flex;height: 100rpx;background-color: rgb(45, 135, 222);width: 100%;display: flex;justify-content: center;align-items: center;color: white;padding: 20rpx;">
			<view style="flex: 1;font-size: 35rpx;">用户健康档案</view>

			<view style="color: white;" @click="gotohistory">最近记录</view>
		</view>
		<view class="container">
			<div for="name">姓名:</div>

			<input type="text" v-model="name" @input="inputname">

			<div for="age">年龄:</div>
			<input type="number" v-model="age" @input="inputage">

			<div for="gender">性别:</div>

			<radio-group class="uni-list" @change="radioChange" style="display:flex;">
				<div class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
					<view>
						<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
					</view>
					<view>
						<div class="label-2-text" :for="item.name" style="padding: 7.5rpx;">
							<text>{{item.value}}</text>
						</div>
					</view>
				</div>
			</radio-group>

			<div for="height">身高(cm):</div>
			<input type="digit" v-model="height" @input="inputheight">
			<div for="weight">体重(kg):</div>
			<input type="digit" v-model="weight" @input="inputweight">

			<div for="diastolic">舒张压(mmhg) (可选):</div>
			<input type="digit" v-model="diastolic" @input="inputdi">

			<div for="systolic">收缩压(mmhg) (可选):</div>
			<input type="digit" v-model="systolic" @input="inputsy">
			<button @click="generateReport" class="button">生成报告</button>
			<view style="height: 20vh;"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		getcreateHealthRecordHistory,
		createHealthRecord
	} from '@/request/health.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';

	onMounted(() => {

	})

	onLoad((option) => {
		console.log(option, "e")
		orderId.value = option.orderId
		// uni.setStorageSync("tokenkey",option.token)
	})
  const orderId = ref("")
	const insurantId = ref("")
	const name = ref('');
	const age = ref();
	const gender = ref(1);
	const height = ref();
	const weight = ref();
	const systolic = ref(null);
	const diastolic = ref(null);
	const user_accounts_id = ref("")
	const value = ref(1)
	const checkboxItems = ref([{
			name: '男',
			value: "男",
			checked: 'true'
		},
		{
			name: '女',
			value: '女',

		}
	]);

	const radioItems = ref([{
			name: '男',
			value: "男",
			checked: 'true'
		},
		{
			name: '女',
			value: '女',

		}
	]);

	const clickontotwo = () => {
		uni.navigateTo({
			url: "/pages/gather/gather"
		})
	}

	const range = [{
			value: 0,
			text: "女"
		},
		{
			value: 1,
			text: "男"
		}

	]
	const change = (e) => {
		console.log(e)
		gender.value = e
	}
	const inputname = (e) => {
		console.log(e.detail.value)
		name.value = e.detail.value
	}
	const inputage = (e) => {
		console.log(e.detail.value)
		age.value = e.detail.value
	}
	const inputheight = (e) => {
		console.log(e.detail.value)
		height.value = e.detail.value
	}
	const inputweight = (e) => {
		console.log(e.detail.value)
		weight.value = e.detail.value
	}
	const inputsy = (e) => {
		console.log(e.detail.value)
		systolic.value = e.detail.value
	}
	const inputdi = (e) => {
		console.log(e.detail.value)
		diastolic.value = e.detail.value
	}

	const radioChange = (e) => {
		const checked = e.detail.value;

		if (checked === "男") {
			gender.value = 1
		} else if (checked === "女") {
			gender.value = 0
		}
		// console.log(checked, "checked")
		// console.log(gender.value, "checked")
	};

	const gotohistory = () => {
		uni.navigateTo({
			url:`/pages/healthrecord/history?orderId=${orderId.value}`
		})
	}


	const generateReport = () => {
		console.log("cd", gender.value)
		if (name.value && !isNaN(Number(age.value)) === true && (gender.value === 0 || gender.value === 1) && !
			isNaN(
				Number(height.value)) === true && !isNaN(Number(weight.value)) === true && age.value && height
			.value && weight
			.value) {
			if (diastolic.value && systolic.value) {
				if (isNaN(Number(diastolic.value)) && isNaN(Number(systolic.value))) {
					// 如果舒张压或收缩压不是数字，不执行下面的代码
					uni.showToast({
						title: "信息填写不正确",
						icon: "none"
					})
				} else {
					diastolic.value = diastolic.value !== '' ? diastolic.value : null;
					systolic.value = systolic.value !== '' ? systolic.value : null;
					const bmi = weight.value / ((height.value / 100) ** 2);
					const bmr = gender.value === '男' ? 88.36 + (13.4 * weight.value) + (4.8 * height.value) - (5.7 *
							age
							.value) :
						447.6 + (9.2 * weight.value) + (3.1 * height.value) - (4.3 * age.value);
					const bodyFat = gender.value === '男' ? 1.20 * bmi + 0.23 * age.value - 16.2 : 1.20 * bmi + 0.23 *
						age
						.value -
						5.4;
					const bloodPressureClass = classifyBloodPressure(systolic.value, diastolic.value);
					createHealthRecord(insurantId.value,bloodPressureClass,bmi,bmr,bodyFat,age.value,diastolic.value,height.value,name.value,gender.value,systolic.value,weight.value,1,orderId.value).then(res=>{
						console.log(res)
						if(res.code===200){
							uni.navigateTo({
								url:`/pages/healthrecord/detail?orderId=${orderId.value}&id=${res.data.id}`
							})
						}else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					}).catch(err=>{
						uni.showToast({
							title:err.message,
							icon:"none"
						})
					})

				}
			} else {

				diastolic.value = diastolic.value !== '' ? diastolic.value : null;
				systolic.value = systolic.value !== '' ? systolic.value : null;
				const bmi = weight.value / ((height.value / 100) ** 2);
				const bmr = gender.value === '男' ? 88.36 + (13.4 * weight.value) + (4.8 * height.value) - (5.7 * age
						.value) :
					447.6 + (9.2 * weight.value) + (3.1 * height.value) - (4.3 * age.value);
				const bodyFat = gender.value === '男' ? 1.20 * bmi + 0.23 * age.value - 16.2 : 1.20 * bmi + 0.23 *
					age.value -
					5.4;
				const bloodPressureClass = classifyBloodPressure(systolic.value, diastolic.value);

				//     report.value = `
				// 		<br/>
				//   <h3>健康检测报告</h3>	 <br/>
				//   <p>姓名: ${name.value}</p>	 <br/>
				//   <p>年龄: ${age.value}</p>	 <br/>
				//   <p>性别: ${gender.value===1?"男":"女"}</p>	 <br/>
				//   <p>身高: ${height.value} cm</p>	 <br/>
				//   <p>体重: ${weight.value} kg</p>	 <br/>
				//       <p>舒张压: ${diastolic.value !== null ? diastolic.value + ' mmHg' : '未提供'}</p>	 <br/>
				//   <p>收缩压: ${systolic.value !== null ? systolic.value + ' mmHg' : '未提供'}</p>	 <br/>

				//   <p>BMI: ${bmi.toFixed(2)} (${interpretBMI(bmi)})</p>	 <br/>
				//   <p>基础代谢率(BMR): ${bmr.toFixed(2)} kcal/天</p>	 <br/>
				//   <p>体脂率: ${bodyFat.toFixed(2)}%</p>	 <br/>
				//   <p>血压分类: ${bloodPressureClass}</p>	 <br/>
				// `;


				createHealthRecord(insurantId.value,bloodPressureClass,bmi,bmr,bodyFat,age.value,diastolic.value,height.value,name.value,gender.value,systolic.value,weight.value,1,orderId.value).then(res=>{
						console.log(res)
					if(res.code===200){
						uni.navigateTo({
							url:`/pages/healthrecord/detail?orderId=${orderId.value}&id=${res.data.id}`
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).catch(err=>{
					uni.showToast({
						title:err.message,
						icon:"none"
					})
				})
				// createHealthRecord().then(res => {
				// 	console.log(res)
				// 	if (res.code === 200) {
				// 		uni.navigateTo({
				// 			url: "/pages/index/healthhistory"
				// 		})
				// 	} else {
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: "none"
				// 		})
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
			}

		} else {
			uni.showToast({
				title: "请正确填写信息",
				icon: "none"
			})
		}

	}

	const interpretBMI = (bmi) => {
		if (bmi < 18.5) {
			return '体重过轻';
		} else if (18.5 <= bmi && bmi < 24.9) {
			return '正常范围';
		} else if (25 <= bmi && bmi < 29.9) {
			return '超重';
		} else {
			return '肥胖';
		}
	}

	// const classifyBloodPressure = (systolic, diastolic) => {
	// 	if (systolic === null && diastolic === null) {
	// 		return '未提供血压数据';
	// 	} else if (systolic < 120 && (diastolic === null || diastolic < 80)) {
	// 		return '正常血压';
	// 	} else if ((120 <= systolic && systolic <= 139) || (diastolic !== null && (80 <= diastolic &&
	// 			diastolic <=
	// 			89))) {
	// 		return '高血压前期';
	// 	} else if ((140 <= systolic && systolic <= 159) || (diastolic !== null && (90 <= diastolic &&
	// 			diastolic <=
	// 			99))) {
	// 		return '高血压一期';
	// 	} else {
	// 		return '高血压二期';
	// 	}
	// }
	const classifyBloodPressure = (systolic, diastolic) => {
	    if (systolic === null && diastolic === null) {
	        return '未提供血压数据';
	    }

	    if (systolic < 120 && (diastolic === null || diastolic < 80)) {
	        return '正常血压';
	    }

	    if ((120 <= systolic && systolic <= 139) || (diastolic !== null && 80 <= diastolic && diastolic <= 89)) {
	        return '高血压前期';
	    }

	    if ((140 <= systolic && systolic <= 159) || (diastolic !== null && 90 <= diastolic && diastolic <= 99)) {
	        return '高血压一期';
	    }

	    if (systolic >= 160 || (diastolic !== null && diastolic >= 100)) {
	        return '高血压二期';
	    }

	    return '没有匹配的血压分类';
	};
</script>

<style>
	.my-custom-classcolor {
		background-color: wheat;
		color: white;
	}

	.tanchu {
		background-color: white;
		min-height: 800rpx;
		width: 600rpx;
		margin: 0 auto;
		border-radius: 30rpx;
	}

	.weizhi {
		width: 90%;
		margin: 0 auto;

	}

	/* CSS 样式保持不变 */
	.body {
		font-family: Arial, sans-serif;
/* 		display: flex;
		justify-content: center;
		align-items: center; */
		/* height: 100vh; */
		/* background-color: #f4f4f4; */
		/* background-color: rgb(218, 232, 242); */
		/* flex-direction: column; */
	}


	.container {
		background-color: rgb(218, 232, 242);
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		width: 100%;
		/* height: 110vh; */
		/* max-width: 400px; */
		box-sizing: border-box;
	}

	.container h2 {
		text-align: center;
		margin-bottom: 20px;
	}

	.container label {
		display: block;
		margin-bottom: 5px;

	}

	.container input {
		width: 100%;
		padding: 8px;
		margin-bottom: 10px;
		border: 1px solid #007aec;
		border-radius: 4px;
		box-sizing: border-box;
		height: 80rpx;

		background-color: white;

	}

	.container button {
		margin-top: 50rpx;
		width: 100%;
		padding: 10px;
		background-color: #2846FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container button:hover {
		background-color: #2846FF;
	}

	.report {
		margin-top: 30rpx;
	}

	.report h3 {
		text-align: center;
	}

	.fixed-name {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: none;
		box-sizing: border-box;
	}
</style>
